<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>class与style绑定</title>
  <style>
    .active {
      color: aqua;
    }

    .classA {
      color: blueviolet;
    }

    .classB {
      background: green;
    }

    .error {
      background: yellow;
    }
  </style>
</head>

<body>

  <!--

      - 操作class列表和内联样式是比较常见的需求，因此，在v-bind用于class和style时，Vue做了专门的增强
        表达式结果的类型除了字符串之外，还可以是对象或数组
          
      - class绑定
            1. 对象语法，active这个class存在与否将取决于数据属性 isActive
                <div :class="{ active: isActive }"></div> // 这是内联写法
            
            2. v-bind:class指令可以与元素的class属性共存  

            3. 绑定的数据对象不必内联定义在模板里
                <div :class="classObject"></div>
                data: {
                  classObject: {
                    active: true
                  }
                }

            4. 数组语法
                 <div :class="['classA', 'classB']"></div>
                 <div :class="[myClass, errorClass]"></div> // myClass errorClass是数据对象的属性



      - style绑定

            1. 对象语法
              <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> // activeColor fontSize是数据对象的属性
              
              - 直接绑定到一个样式对象会更清晰
              <div :style="styleObject"></div>      

              data: {
                styleObject: {
                  color: 'red',
                  fontSize: '13px'
                }
              }

            2. 数组语法
              - 将多个样式对象应用到一个元素上
              <div v-bind:style="[baseStyles, overridingStyles]"></div>
              
-->

  <div id="demo">
    <h2>class绑定</h2>
    <p :class="myClass">字符串</p>
    <p :class="{active: isActive}">对象</p>
    <p :class="['classA', 'classB']">数组</p>
    <p :class="[myClass, errorClass]">数组</p>

    <h2>style绑定</h2>
    <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">amour</p>
    <button @click="update">更新</button>

  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        myClass: 'classA',
        isActive: true,
        errorClass: 'error',
        activeColor: 'red',
        fontSize: '20'
      },

      methods: {
        update() {
          this.isActive = !this.isActive;
          this.activeColor = 'blue'
          this.fontSize = '30'
        }
      }
    })
  </script>
</body>

</html>